<template>
    <!-- wrap -->
    <div class="content">
        <!-- 企业信息 -->
        <div class="enterprise">
            <div class="inline_block avatar"><img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/default-head.png" alt="头像"></div>
            <div class="inline_block">
                <div class="info">
                    <div class="inline_block">
                        <label class="info_label">企业名：</label>
                        <span>{{userInfo.enterprise_name}}</span>
                        <el-tag size="mini" color="#ffb307" v-if="customerStatus.agencyCertificationStatus == 2 || this.customerInfo.isOperate == 1">已认证</el-tag>
                        <el-tag size="mini" color="#ffb307" v-if="customerStatus.agencyCertificationStatus != 2 && this.customerInfo.isOperate == 0">未认证</el-tag>
                    </div>
                </div>
                <div class="info">
                    <div class="inline_block info_line">
                        <label class="info_label">联系人：</label><span>{{customerInfo.customer_name ? customerInfo.customer_name : '未知'}}</span>
                    </div>
                    <div class="inline_block info_line">
                        <label class="info_label">手机号：</label><span>{{customerInfo.phone_number ? customerInfo.phone_number : '未知'}}</span>
                    </div>
                </div>
                <div class="info">
                    <div class="inline_block info_line">
                        <label class="info_label">所在地址：</label>
                        <span v-if="customerInfo.trade_location_province">{{customerInfo.trade_location_province}}{{customerInfo.trade_location_city}}{{customerInfo.trade_location}}</span>
                        <span v-if="!customerInfo.trade_location_province">未知</span>
                    </div>
                    <div class="inline_block info_line">
                        <label class="info_label">信息完整度：</label>
                        <div class="inline_block completion">
                            <el-progress class="bottom_2px"
                                :stroke-width="16" 
                                :percentage="completion"
                                status="exception"
                                :text-inside="true"
                                :show-text="true"
                                :width=100
                            ></el-progress>
                        </div>
                        <span class="hpx-red-tips toperfect" @click="perfect()" v-if="customerStatus.accountBinding != 2">去完善或修改 <i class="iconfont icon-gengduo1"></i></span>
                        <span class="hpx-red-tips toperfect" @click="perfect()" v-if="customerStatus.accountBinding == 2">去修改 <i class="iconfont icon-gengduo1"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 信息完整度弹框 -->
        <el-dialog
            title="信息完整度"
            :visible.sync="dialogVisible"
            width="560px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            center
            class="completionBtn">
            <div>
                <el-row class="step">
                    <span class="label">联系人</span>
                    <el-button type="primary" plain round size="mini" @click="approveCustomer">
                        <span v-if="customerStatus.isVerified == 0">完善联系人信息</span>
                        <span v-if="customerStatus.isVerified == 1">查看</span>
                    </el-button>
                </el-row>
                <el-row class="step">
                    <span class="label">机构认证</span>
                    <el-button type="primary" plain round size="mini" @click="approveEnterprise">
                        <span v-if="customerStatus.agencyCertificationStatus == 0">请完成认证</span>
                        <span v-if="customerStatus.agencyCertificationStatus == 1">请等待审核</span>
                        <span v-if="customerStatus.agencyCertificationStatus == 2">机构已认证</span>
                        <span v-if="customerStatus.agencyCertificationStatus == -1">请重新认证</span>
                    </el-button>
                </el-row>
                <el-row class="step">
                    <span class="label">业务授权</span>
                    <el-button type="primary" plain round size="mini" @click="approveAgent">
                        <span v-if="customerStatus.businessAuthorizationStatus == 0">请完成授权</span>
                        <span v-if="customerStatus.businessAuthorizationStatus == 1">请等待审核</span>
                        <span v-if="customerStatus.businessAuthorizationStatus == 2">授权已完成</span>
                        <span v-if="customerStatus.businessAuthorizationStatus == -1">请重新授权</span>
                    </el-button>
                </el-row>
                <el-row class="step">
                    <span class="label">账户绑定</span>
                    <el-button type="primary" plain round size="mini" @click="approveAccount">
                        <span v-if="customerStatus.accountBinding == 0">请完成绑定</span>
                        <span v-if="customerStatus.accountBinding == 1">请等待鉴权</span>
                        <span v-if="customerStatus.accountBinding == 2">绑定已成功</span>
                        <span v-if="customerStatus.accountBinding == -1">请重新绑定</span>
                    </el-button>
                </el-row>
                <el-row class="step">
                    <span class="label">操作员</span>
                    <el-button type="primary" round size="mini" @click="operater">添加/解除</el-button>
                </el-row>
            </div>
        </el-dialog>
        <!-- 小额鉴权 -->
        <el-row v-if="customerStatus.accountBinding == 1" class="appraisal">
            <el-form label-width="120px">
                <el-form-item label="银行账户验证: ">
                    <el-input placeholder="请输入绑定账户中的鉴权金额" size="small" v-model="amt" suffix-icon="iconfont icon-yuan"></el-input>
                    <el-button type="primary" size="small" @click="appraisal()">账户验证</el-button>
                </el-form-item>
                <el-form-item label="">
                    <!-- <el-button type="info" size="small">取消</el-button> -->
                </el-form-item>
            </el-form>
        </el-row>
        <!-- 卖方订单 -->
        <el-row v-if="customerStatus.accountBinding == 2">
            <el-row class="content-title">
                <el-col :span="12">
                    <i class="iconfont icon-maichu1"></i>
                    有 <span class="bill-count-remind">{{BillCountOfSell}}</span> 笔 <span class="hpx-font-weight">卖出</span> 交易订单待处理
                </el-col>
                <el-col :span="12" v-if="BillCountOfSell > 3" class="handle_moreOrder">
                    <el-button type="text" @click="$router.push('/seller/order')">
                        处理更多卖方订单 <i class="iconfont icon-gengduo1"></i>
                    </el-button>
                </el-col>
            </el-row>
            <Table :tableData="sellerData" :pagination="false" :tableName="'tradeOrders'">
                <template slot-scope="{scope}">
                    <el-button type="primary" size="small" @click="endorse(scope.row)" v-if="scope.row.order_status_id == 806">确认背书</el-button>
                    <el-popover
                        placement="bottom-start"
                        title="背书信息"
                        width="200"
                        trigger="hover">
                        <el-row>
                            机构名称：{{ scope.row.receiver_account_person }}
                        </el-row>
                        <el-row>
                            开户行：{{ scope.row.receiver_account_bank }}
                        </el-row>
                        <el-row>
                            账号：{{ scope.row.receiver_account_number }}
                        </el-row>
                        <el-row>
                            联行号：{{ scope.row.receiver_account_bank_number }}
                        </el-row>
                        <el-button type="text" size="small" slot="reference" v-if="scope.row.order_status_id == 806">
                            <i class="iconfont icon-beishuxinxi"></i> 背书信息
                        </el-button>
                    </el-popover>
                    <el-button type="text" size="small" @click="$router.push(`/seller/order/detail/${scope.row.id}`)"><i class="iconfont icon-xiangqing2"></i> 详情</el-button>
                </template>
            </Table>
        </el-row>
        <!-- 背书弹框 -->
        <DialogInput ref="endorseDialog" title="卖方确认背书操作">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row class="warning">是否确认背书?</el-row>
                <el-row>请确认买票方付款后，再到网银去背书，否则后果自负!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmEndorse()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
        <!-- 背书成功弹框 -->
        <DialogInput ref="endorseSuccess" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>背书成功!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>

        <!-- 买方订单 -->
        <el-row v-if="customerStatus.accountBinding == 2">
            <el-row class="content-title">
                <el-col :span="12">
                    <i class="iconfont icon-mairu1"></i>
                    有 <span class="bill-count-remind">{{BillCountOfBuy}}</span> 笔 <span class="hpx-font-weight">买入</span> 交易订单待处理
                </el-col>
                <el-col :span="12" v-if="BillCountOfBuy > 3" class="handle_moreOrder">
                    <el-button type="text" @click="$router.push('/buyer/order')">处理更多买方订单 <i class="iconfont icon-gengduo1"></i></el-button>
                </el-col>
            </el-row>
            <Table :tableData="buyerData" :pagination="false" :tableName="'tradeOrders'">
                <template slot-scope="{scope}">
                    <el-button type="primary" size="small" @click="payment(scope.row)" v-if="scope.row.order_status_id == 804">
                        付款
                    </el-button>
                    <el-button type="primary" size="small" @click="signFor(scope.row)" v-if="scope.row.order_status_id == 807">
                        确认签收
                    </el-button>
                    <!-- <el-button type="primary" size="small" @click="evaluate()" v-if="scope.row.order_status_id == 812">
                        评价
                    </el-button> -->
                    <el-button type="text" size="small" @click="$router.push(`/buyer/order/detail/${scope.row.id}`)">
                        <i class="iconfont icon-xiangqing2"></i> 详情
                    </el-button>
                </template>
            </Table>
        </el-row>
        <!-- 付款弹框 -->
        <DialogPayment ref="remin" @updataTable="updataTable"/>
        <!-- 确认签收弹框 -->
        <DialogInput ref="confirm" title="买方确认签收操作">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row class="warning">是否确认签收</el-row>
                <el-row>请在网银中签收后，再到平台上确认签收!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmSignFor()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator'
    import Table from '@component/common/HpxTable.vue' 
    import DialogInput from '@component/common/DialogInput.vue' 
    import moment from 'moment' 
    import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
    import { hideStr,ellipsis } from '@/util/format'
    import DialogPayment from '@component/common/DialogPayment.vue'
    @Component({
        components:{
            Table,
            DialogInput,
            DialogPayment
        },
        computed: {
            ...mapState({
                enterprise: 'enterprise',
                userInfo: 'userInfo',
                allTips: 'allTips'
            }),
            ...mapGetters('enterprise',['getCustomerStatusInfo']),
        },
        methods: {
            ...mapActions([
                'getAllTips'
            ])
        }
    })
    export default class Info extends Vue {
    // data
        BillCountOfBuy:number = 0
        BillCountOfSell:number = 0
        dialogVisible:boolean = false
        buyerData:TableData = {
            header:[
                {
                    label: '订单号',
                    key: 'order_number'
                },
                {
                    label: '发布时间',
                    key: 'bill_publishing_time',
                    formatter: (row:any) => moment(row.bill_publishing_time).format('MM-DD HH:mm')
                },
                {
                    label: '承兑人',
                    key: 'acceptor_name',
                    formatter: (row:any) => ellipsis(row.acceptor_name, '...', 10)
                },
                {
                    label: '票面金额(万)',
                    key: 'bill_sum_price'
                },
                {
                    label: '到期时间',
                    key: 'bill_deadline_time',
                    formatter: (row:any) => moment(row.bill_deadline_time).format('YYYY-MM-DD')
                },
                {
                    label: '每十万扣',
                    key: 'order_every_plus_deduct',
                    formatter: (row:any) => row.bill_bidding_model_id == 3210 ? '一口价' + row.order_every_plus_deduct + '元' : '竞价'
                },
                {
                    label: '票号后六位数',
                    key: 'bill_number',
                    formatter: (row:any) => hideStr(row.bill_number)
                },
                {
                    label: '交易对手',
                    key: 'drawer_name'
                },
                {
                    label: '状态',
                    key: 'order_status_name'
                }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            }
        }
        sellerData:TableData = {
            header:[
                {
                    label: '订单号',
                    key: 'order_number'
                },
                {
                    label: '发布时间',
                    key: 'bill_publishing_time',
                    formatter: (row:any) => moment(row.bill_publishing_time).format('MM-DD HH:mm')
                },
                {
                    label: '承兑人',
                    key: 'acceptor_name',
                    formatter: (row:any) => ellipsis(row.acceptor_name, '...', 10)
                },
                {
                    label: '票面金额(万)',
                    key: 'bill_sum_price'
                },
                {
                    label: '到期时间',
                    key: 'bill_deadline_time',
                    formatter: (row:any) => moment(row.bill_deadline_time).format('YYYY-MM-DD')
                },
                {
                    label: '每十万扣',
                    key: 'order_every_plus_deduct',
                    formatter: (row:any) => row.bidding_mode == 3210 ? '一口价' + row.order_every_plus_deduct + '元' : '竞价'
                },
                {
                    label: '电票所在户',
                    key: 'bill_bank_name'
                },
                {
                    label: '票号后六位数',
                    key: 'bill_number',
                    formatter: (row:any) => hideStr(row.bill_number)
                },
                {
                    label: '交易对手',
                    key: 'receiver_name'
                },
                {
                    label: '状态',
                    key: 'order_status_name'
                }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            }
        }
        //用户详细信息
        customerInfo:any = {}
        //鉴权金额
        amt = ''
        //鉴权账户id
        accountId = ''
        //签收信息
        signForInfo:any = {}
        //背书信息
        endorseInfo:any = {}
    // methods
        //查询执剑人账户
        async searchXingye () {
            let res = await this.$http.get('paying/xingyeapi/query')
        }
        //查询银行卡信息
        async getAccount () {
            let res = await this.$http.get(`paying/xingyeapi/account/getAccount/${this.userInfo.enterprise_id}`)
            if(res.status == 200){
                if(res.data){
                    this.accountId = res.data.acct_list[0].account_id
                }
            }
        }

        //鉴权
        async appraisal () {
            if(!this.amt){
                this.$alert('请输入鉴权金额','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            let res = await this.$http.post(`paying/xingyeapi/xingYeOpenAccount/checkAccount/${this.userInfo.enterprise_id}`,{
                amt: this.amt,
                accountId: this.accountId
            })
            if(res.status == 200){
                this.$alert('小额验证通过，退出重新登录才能进行电票交易！','提醒',{
                    confirmButtonText: '我知道了',
                    customClass: 'custom-message-box'
                }).then(() => {
                    this.$http.post('customers/customerLogout')
                    localStorage.removeItem('userInfo');
                    localStorage.removeItem('Authorization');
                    location.href = "user.html";
                })
            }
        }
        //完善信息弹框
        perfect () {
            if(this.customerInfo.isOperate == 1){
                this.$alert('您是操作员，无法修改信息，有疑问请联系客服','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            this.dialogVisible = true
        }
        //完善联系人信息
        approveCustomer () {
            window.location.href = 'user.html#/approveCustomer'
        }
        //完善企业
        approveEnterprise () {
            if(this.customerStatus.isVerified != 1){
                this.$alert('请先完善联系人信息','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            window.location.href = 'user.html#/approveEnterprise'
        }
        //完善经办人
        approveAgent () {
            if(this.customerStatus.agencyCertificationStatus == 0){
                this.$alert('请先进行机构认证','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            window.location.href = 'user.html#/approveAgent'
        }
        //绑定银行账户
        approveAccount () {
            if(this.customerStatus.businessAuthorizationStatus == 0){
                this.$alert('请先进行业务授权','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(this.customerStatus.accountBinding == 2){
                this.$router.push('/enterprise/judge')
            } else {
                window.location.href = 'user.html#/approveAccount'
            }
        }
        //操作员
        operater () {
            if(this.customerStatus.agencyCertificationStatus == 0){
                this.$alert('请先进行机构认证','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            window.location.href = 'trade.html#/enterprise/operater'
        }
        //用户信息完整度
        get completion () {
            //账户绑定审核完成
            if(this.getCustomerStatusInfo.accountBinding == 2){
                return 100
            }else{
                //业务授权审核完成
                if(this.getCustomerStatusInfo.businessAuthorizationStatus == 2){
                    return 75
                }else{
                    //机构认证审核完成
                    if(this.getCustomerStatusInfo.agencyCertificationStatus == 2){
                        return 50
                    }else{
                        //联系人信息提交完成
                        if(this.getCustomerStatusInfo.isVerified == 1){
                            return 25
                        }else{
                            return 0
                        }
                    }
                }
            }
        }
        //查询用户基本信息
        async getCustomerInfo () {
            let res = await this.$http.get(`customers/customer/${this.userInfo.customer_id}`)
            if(res.status == 200){
                this.customerInfo = res.data
            }
        }
        //查询买方订单
        async getBuyerOrder () {
            let params = {
                orderType: 'newOrder',
                status: 'F',
                n: 3,
                p: 1
            }
            let res = await this.$http.get('orders/order/getForReceiverOrder',{params}) 
            if(res.status == 200){
                this.buyerData.body = res.data.orders
                this.BillCountOfBuy = res.data.page_info.items_number
            }
        }
        //查询卖方订单
        async getSellerOrder () {
            let params = {
                orderType: 'newOrder',
                status: 'B',
                n: 3,
                p: 1
            }
            let res = await this.$http.get('orders/order/getForDrawerOrder',{params}) 
            if(res.status == 200){
                this.sellerData.body = res.data.items
                this.BillCountOfSell = res.data.totalNum
            }
        }

        //背书
        endorse (row) {
            this.endorseInfo = row
            this.$refs['endorseDialog'].openDialog()
        }
        //确认背书
        async confirmEndorse () {
            let res = await this.$http.put(`orders/orderEndorsement/${this.endorseInfo.id}`)
            if (res.status < 300){
                this.getSellerOrder()
                this.getAllTips()
                this.$refs['endorseDialog'].closeDialog();
                this.$refs['endorseSuccess'].openDialog();
            }
        }

        //付款
        payment (item) {
            this.$refs['remin'].openDialog(item.id)
        }
        //付款成功回调
        updataTable () {
            this.getBuyerOrder()
        }

        //签收
        signFor (row) {
            this.signForInfo = row
            this.$refs['confirm'].openDialog()
        }
        //确认签收
        async confirmSignFor () {
            let res = await this.$http.put(`paying/xingyeapi/pay/${this.signForInfo.id}`)
            if(res.status == 200){
                this.getBuyerOrder()
                this.getAllTips()
                this.$refs['confirm'].closeDialog();
                this.$alert(res.msg,'提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
            }
        }
        closeDialog () {
            this.$refs['confirm'].closeDialog();
            this.$refs['endorseDialog'].closeDialog();
            this.$refs['endorseSuccess'].closeDialog();
        }
        get customerStatus() {
            if(this.enterprise.customerStatusInfo.accountBinding == 1){
                this.searchXingye()
                this.getAccount()
            }
            return this.getCustomerStatusInfo
        }
        
        created () {
        
        }

        mounted () {
            this.getCustomerInfo()
            this.getBuyerOrder()
            this.getSellerOrder()
            // console.log(this.enterprise.customerStatusInfo.accountBinding == 1)
            // if(this.enterprise.customerStatusInfo.accountBinding == 1){
            //     this.searchXingye()
            // }
        }
    }
</script>

<style lang="scss" scoped>
    .content-title {
        font-size: 18px;
        border-bottom: 1px solid $__color-primary;
        padding: 10px 0;
        padding-top: 20px;
        .handle_moreOrder{
            text-align: right;
            font-size: 14px;
            .el-button{
                color: $__color-link;
                padding: 0;
                .iconfont{
                    font-size: 14px;
                }
            }
        }
    }

    .bill-count-remind {
        color: $__color-remind;
    }

    .appraisal{
        width: 650px;
        margin: 60px auto;
        .el-input{
            width: 320px;
        }
        .el-button{
            width: 150px;
            &:last-child{
                margin-left: 15px;
            }
        }
    }

    .enterprise {
        border-bottom: 1px solid $__color-line;

        .avatar {
            margin: auto 3em auto 3em;    
        }

        .info {
            line-height: 4rem;
            font-size: 16px;
        }

        .info_line {
            width: 400px;
        }

        .info_label {
            color: $__color-label;
        }

        .completion {
            width: 150px;
        }  
        .toperfect{
            font-size: 14px;
            cursor: pointer;
            .icon-gengduo1:before{
                font-size: 12px;
            }
        } 
    }
    .inline_block{
        .el-tag{
            color: #fff;
        }
    }
    .completionBtn{
        .step{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid $__color-line;
            border-left: 4px solid $__color-primary;
            padding: 0 36px;
            .label{
                color: $__color-show;
                float: left;
            }
            .el-button{
                width: 105px;
                height: 26px;
                float: right;
                margin-top: 12px;
                padding: 0;
            }
        }
        .step:last-child{
            border-bottom: none;
        }
    }
    
</style>
<style lang="scss">
    .completionBtn{
        .el-dialog__header{
            height: 60px;
            line-height: 60px;
            background-color: $__color-bg-primary;
            padding: 0 !important;
            .el-dialog__headerbtn{
                font-size: 24px;
                top: 15px;
            }
        }
        .el-dialog__body{
            padding: 0 0 10px 0 !important;
        }
    }
    .appraisal{
        .el-input__suffix{
            color: $__color-show;
        }
    }
    .enterprise{
        .completion {
            .el-progress-bar{
                height: 17.64px;
                .el-progress-bar__innerText{
                    margin-top: -3px;
                }
            }
        } 
    }
</style>
